<template>
  <router-layout class="detail">
    <!-- 发表评论组件 -->
    <Container v-if="isComBox" :replyinfo="replyinfo" @initList="initList" @isconceal="isComBox=false;isShow=false"></Container>
    <!-- 主题 -->
    <div class="title1">
      <div class="banner">
        <img :src="datainfo.file_path" width="100%" alt>
      </div>
      <div class="padding">
        <div class="header">
          <div class="btn">
            <p v-if="datainfo.active_status==1" style="color: #01A0EF">预热</p>
            <p v-if="datainfo.active_status==2" style="color: #E6A23D">报名中</p>
            <p v-if="datainfo.active_status==3" style="color: #E6A23D">待进行</p>
            <p v-if="datainfo.active_status==4" style="color: #67C23A">进行中</p>
            <p v-if="datainfo.active_status==5" style="color: #DADADA">已结束</p>
          </div>
          <div class="hader-text">{{datainfo.active_title}}</div>
        </div>
        <van-row type="flex" justify="space-between">
          <van-col>
            <p class="dis">{{datainfo.active_address}}</p>
            <p
              class="time"
              v-if="datainfo.active_status < 3"
            >报名时间：{{datainfo.signup_start_time | formate_date}}-{{datainfo.signup_end_time | formate_date}}</p>
            <p
              class="time"
              v-else
            >活动时间：{{datainfo.active_start_time | formate_date}}-{{datainfo.active_end_time | formate_date}}</p>
          </van-col>
        </van-row>
      </div>
      <!-- 详情展示 -->
      <div class="introduce ude-box" v-html="datainfo.active_content || '暂无内容...'"></div>
      <!-- 报名人员展示 -->
      <div class="playName" v-if="datainfo.activeApplys">
        <van-row gutter="20">
          <van-col span="4" v-for="item in datainfo.activeApplys" :key="item.id">
            <div class="playList">
              <img
                :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                alt
                srcset
              >
              <p>{{item.user_name}}</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- 树结构排序 -->
      <div class="comment" v-if="datainfo.isApply != 0">
        <div class="comment-head van-hairline--bottom">
          <van-row type="flex" justify="space-between" align="center">
            <van-col>
              <div class="comment-text">全部评论</div>
            </van-col>
            <van-col>
              <span v-if="!isHot" @click="hotClick">
                热度
                <van-icon class="iconfont icon-paixu"/>
              </span>
              <span v-if="isHot" style="color:#01A0EF">
                热度
                <van-icon class="iconfont icon-paixu"/>
              </span>
              <span>|</span>
              <span v-if="!isTime" @click="tiemClick">
                评论
                <van-icon class="iconfont icon-paixu"/>
              </span>
              <span v-if="isTime" style="color:#01A0EF">
                评论
                <van-icon class="iconfont icon-paixu"/>
              </span>
            </van-col>
          </van-row>
        </div>
        <!-- 评论组件 -->
        <Comment v-if="flag" :datainfo="datainfo" @initList="initList" :data="dataList" :depth="0"></Comment>
      </div>
    </div>
    <!-- 发布评论 -->
    <div v-if="datainfo.isApply==0?isShow:!isShow" class="reply-box van-hairline--top">
      <van-row type="flex" justify="space-between" align="center">
        <van-col :span="12">
          <van-cell-group class="reply-left van-hairline--surround">
            <div @click="reply_article">
              <van-field
                @blur="out"
                disabled
                v-model="listQuery.comment_content"
                placeholder="说点什么呢..."
              />
            </div>
          </van-cell-group>
        </van-col>
        <van-col :span="12">
          <i class="comment-num">
            <i v-if="datainfo.iscollect==0" class="iconfont icon-shoucang" @click="collect(1)"></i>
            <i v-if="datainfo.iscollect==1" style="color:red" class="iconfont icon-shoucang" @click="collect(2)"></i>
            <span>{{ datainfo.collect_nums || 0}}</span>
          </i>
          <i class="comment-num">
            <i v-if="datainfo.islike==0" class="iconfont icon-dianzan1" @click="give_abulous"></i>
            <i v-if="datainfo.islike==1" style="color:#01A0EF" class="iconfont icon-dianzan1" @click="over_abulous"></i>
            <span>{{ datainfo.like_nums || 0}}</span>
          </i>
          <i class="comment-num">
            <i class="iconfont icon-xiaoxi" @click="reply_article"></i>
            <span>{{ datainfo.comment_nums || 0}}</span>
          </i>
        </van-col>
      </van-row>
    </div>
    <!-- 提交报名按钮 -->
    <div class="base" v-if="datainfo.active_status==2 && datainfo.isApply == 0">
      <button class="base-btn" @click="play()">
        <p>{{playName}}</p>
        <!-- <p>{{ $route.query.name!='order'?'立即报名':'取消报名' }}</p> -->
      </button>
    </div>
    <!-- 表单提交 -->
    <van-popup v-model="show">
      <div class="pop">
        <div class="mas_title">请填写报名信息</div>
        <div class="inpt van-hairline--bottom" v-for="(item, index) in activefields" :key="index">
          <van-field :label="item.activefield_name" @blur="out" v-model="item.conent" placeholder="请输入"/>
        </div>
        <div class="base1" v-if="datainfo.active_status==2">
          <button @click="play1()" class="base-btn">
            <p>提交并报名</p>
            <p>{{ $route.query.name!='order'?'立即报名':'取消报名' }}</p>
          </button>
        </div>
      </div>
    </van-popup>
  </router-layout>
</template>
<script>
import Comment from "./component/Comment";
import Container from "./component/Container"; // 导入发表评论组件
import {
  activity_findById,
  activity_applyActivity,
  activity_addReadNum,
  activity_addCollectNum,
  activity_decCollectNum,
  activity_getTree,
  activity_addLikeNum
} from "@/api/activity";
import TitleItem from "../../components/public/title/title";
import Backtop from "../public/backtop/Backtop"; //导入回到顶部
import moment from "moment";
import other from "@/utils/other";

export default {
  name: "ActivityDetail",
  components: { TitleItem, Backtop, Container, Comment },
  data() {
    return {
      conent: "",
      flag:false,
      isComBox: false,
      isShow: false,
      show: false, //表单弹窗
      isHot: false, //控制热度筛选排行
      isTime: false, //控制时间筛选排行
      disabled: false,
      isApply: "", //判断是否已经报名
      activefields: [], //报名表单数据
      cacheForm: [],
      playName: "立即报名",
      treeList: {
        order_by: "",
        company_id: localStorage.getItem("companyId") - 0
      },
      classA: true, //判断class
      datainfo: {}, //获取评论数据；
      dataList: [], //树结构数据
      listQuery: {},
      //   t_active: [
      //     { name: "预热中", type: null },
      //     { name: "报名中", type: "danger" },
      //     { name: "待开始", type: "warning" },
      //     { name: "进行中", type: "success" },
      //     { name: "已结束", type: "info" }
      //   ],
      replyinfo: {}
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY/MM/DD");
    }
  },
  methods: {
    out() {
      other.inputBlur();
    },
    //点赞
    give_abulous() {
      this.oneAbulous();
    },
    over_abulous(){
      this.$toast("您已经点赞过了不能重复点赞");
    },
    async oneAbulous() {
      let query = Object.assign(
        { islike: 1 },
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await activity_addLikeNum(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("点赞成功");
        this.initList();
      }
    },
    reply_article() {
      this.isComBox = true;
      this.isShow = true;
      this.replyinfo = {
        parent_id: 0,
        active_id: this.$route.query.id,
        comment_content: "",
        like_nums: 0,
        company_id: localStorage.getItem("companyId") - 0
      };
    },
    hotClick() {
      this.isHot = true;
      this.isTime = false;
      this.treeList.order_by = "like";
      this.get_treeList()
    },
    tiemClick() {
      this.isHot = false;
      this.isTime = true;
      this.treeList.order_by = "time";
      this.get_treeList()
    },
    play() {
      if (this.activefields == "") {
        this.$dialog
          .confirm({
            message: "报名后将无法取消?"
          })
          .then(() => {
            this.sumPlay();
          })
          .catch(() => {});
      } else {
        this.show = true;
      }
      //   this.sumPlay();
    },
    play1() {
      this.activefields.map(it => {
        this.cacheForm.push({
          activefield_id: it.activefield_id,
          activefield_value: it.conent
        });
      });
      this.sumPlay();
    },
    collect(e) {
      if (e == 1) {
        this.addCollect();
      }
      if (e == 2) {
        this.$dialog
          .confirm({
            message: "您确定要取消收藏吗?"
          })
          .then(() => {
            this.deleCollect();
          })
          .catch(() => {});
      }
    },
    async addCollect() {
      //添加一次收藏
      let parm = {
        iscollect: 1,
        company_id: localStorage.getItem("companyId") - 0,
        id: this.$route.query.id
      };
      let { data } = await activity_addCollectNum(parm);
      if (data.status == 100) {
        this.$toast.success("收藏成功");
        this.initList();
      }
    },
    async deleCollect() {
      //取消收藏
      let parm = {
        iscollect: 0,
        company_id: localStorage.getItem("companyId") - 0,
        id: this.$route.query.id
      };
      let { data } = await activity_decCollectNum(parm);
      if (data.status == 100) {
        this.$toast.success("取消收藏成功");
        this.initList();
      }
    },
    async sumPlay() {
      try {
        let query = {
          active_id: this.$route.query.id,
          activefields: JSON.stringify(this.cacheForm)
        };
        let res = await activity_applyActivity(query);
        if (res.data.status == 100) {
          this.$toast("报名成功");
          this.show = false;
          this.initList();
        }
      } catch (error) {
        if (error.data.status == 101) {
          this.$toast(error.data.msg);
        }
      }
    },
    //一次阅读
    async oneBrowse() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await activity_addReadNum(query);
      let result = res.data;
      if (result.status == 100) {
      }
    },
    //获取树结构数据
    async get_treeList() {
      let query = Object.assign(
        { active_id: this.$route.query.id },
        this.treeList
      );
      let res = await activity_getTree(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data;
      }
    },
    // 获取数据
    async initList() {
      let queryId = this.$route.query.id;
      let { data } = await activity_findById({ id: queryId });
      if (data.status == 100) {
        this.flag = true
        this.datainfo = data.data;
        this.dataList = data.data.activeComments;
        this.activefields = data.data.activefields;
        // this.datainfo.create_time = clacTime(this.datainfo.create_time);
        this.isApply = this.datainfo.isApply;
        if (this.isApply == 1) {
          this.classA = !this.classA;
          this.playName = "已报名";
          this.disabled = true;
        }
        this.datainfo.active_status = this.$route.query.status;
      }
    }
    //监听页面滚动
    // handleScroll() {
    //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //   let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //   let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    //   if (scrollTop + windowHeight == scrollHeight) {
    //     this.oneBrowse();
    //     window.removeEventListener("scroll", this.handleScroll);
    //   }
    // },
  },
  created: function() {
    this.initList();
    this.oneBrowse()
  },
  mounted() {
    this.$nextTick(() => {
      //监控页面滚动到底部
      const el = document.querySelector(".detail");
      const offsetHeight = el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        if (offsetHeight + scrollTop - scrollHeight >= -1) {
          this.oneBrowse();
        }
      };
    });
    // window.addEventListener("scroll", this.handleScroll);
    this.bus.$on("hidden", () => {
      this.isComBox = !this.isComBox;
      this.isShow = !this.isShow;
      this.listQuery = {
        parent_id: 0,
        comment_content: "",
        company_id: localStorage.getItem("companyId") - 0
      };
    });
    //获取回复帖子的数据
    this.bus.$on("comminfo", data => {
      this.listQuery = {
        parent_id: data.id,
        active_id: data.active_id,
        comment_content: "",
        like_nums: 0,
        company_id: localStorage.getItem("companyId") - 0
      };
      this.replyinfo = this.listQuery;
    });
    //回复帖子刷新数据
    this.bus.$on("submit_comment", () => {
      this.isComBox = false;
      this.isShow = false;
      this.initList();
    });
    //点赞后刷新数据
    this.bus.$on("reloadlist", () => {
      this.initList();
    });
  }
};
</script>
<style lang="scss" scoped>
@import "ActivityDetail";
</style>

